import './App.css'
import { useSelector,useDispatch } from 'react-redux'
import { useEffect } from 'react'
import { useTranslation}   from 'react-i18next'

import {TroggleTheme} from './componments/TroggleTheme'


import { Select, Space } from 'antd';
function App() {
 const {channelList} =  useSelector((state)=>{
  console.log(state.counterReducer)
  return state.counterReducer
 })
 const dispatch = useDispatch()

  useEffect(()=>{
    dispatch(fetchChannels())
  },[dispatch])
  const { t, i18n } = useTranslation()
  const troggleLanguage = ()=>{
    i18n.changeLanguage(i18n.language==='zh'?'en':'zh')
  }


  const handleChange = (value) => {
    console.log(value);
    i18n.changeLanguage(value)
  };

  return (
    <div>
      <TroggleTheme></TroggleTheme>
      <div>
        <table>
          <tbody>
            <tr>
              <td>id</td>
              <td>标题</td>
              <td>内容</td>
              <td>创建时间</td>
            </tr>
            {channelList.map(item=>(
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.title}</td>
                <td>{item.content}</td>
                <td>{item.createdAt}</td>
              </tr>
            )
            )}
          </tbody>
        </table>
      </div>

      <div>
        <p>{t('Welcome to React')}</p>
        <p>{t('learn react')}</p>
        <button onClick={troggleLanguage}>{i18n.language}</button>

       <Space wrap>
          <Select
            defaultValue="中文"
            onChange={handleChange}qr
            options={[
              { value: 'zh', label: '中文' },
              { value: 'en', label: 'English' },
            ]}
          >

          </Select>
        </Space>
      </div>
    </div>
  )
}

export default App
